<!-- 跟单-发起人详情 -->
<template>
  <div class="bg b1" @viewappear="viewappear" ref="content">

    <list class="list" v-if="Config.isLogin">

      <!--刷新-->
      <refresh class="refresh" @refresh="refresh" :display="isRefresh ? 'show' : 'hide'">
        <loading-indicator class="load text1"></loading-indicator>
      </refresh>

      <template v-if="data">

        <cell>
          <div class="head bg2">
            <div class="row acenter">
              <LImage class="img-avatar" :src="data.user.avatar"></LImage>
              <text class ="font32 text1">{{data.user.nickName}}</text>
            </div>

            <div class="height40"></div>
            <text class ="font32 text1">{{data.user.mark}}</text>

            <div class="height10"></div>
            <text class ="font24 text3">{{'使用Vtrading量化交易第'+data.user.timeLent+'天'}}</text>
          </div> 

          <div class="info bg2">
            <div class="column all">
              <div class="row jbetween">
                <text class="font24 text2">粉丝</text>
                <text class="font24 fontz text1">{{data.followNumber}}</text>
              </div>

              <div class="height20"></div>
              <div class="row jbetween">
                <text class="font24 text2">历史策略数</text>
                <text class="font24 fontz text1">{{data.executeNumber}}</text>
              </div>

              <div class="height20"></div>
              <div class="row jbetween">
                <text class="font24 text2">交易胜率</text>
                <text class="font24 fontz text1">{{data.warnRate+'%'}}</text>
              </div>
            </div>
            <div class="info-line line1"></div>
            <div class="column all">
              <div class="row jbetween">
                <text class="font24 text2">被复制次数</text>
                <text class="font24 fontz text1">{{data.copyNumber}}</text>
              </div>

              <div class="height20"></div>
              <div class="row jbetween">
                <text class="font24 text2">历史盈利策略数</text>
                <text class="font24 fontz text1">{{data.eraningNumber}}</text>
              </div>

              <div class="height20"></div>
              <div class="row jbetween">
                <text class="font24 text2">最大回撤</text>
                <text class="font24 fontz text1">{{data.maxDrawdown+'%'}}</text>
              </div>
            </div>
          </div>

          <VSubMenu class="menu" :type="0" :menu="menu" :menus="menus" @menuClick="menuClick" />
        </cell>

        <cell v-if="menu==0">
          <div class="type bg2">
            <div class="type-size" :class="[type==index ? 'main1' :'']"
            v-for="(item, index) in types" :key="index"
            @click="typeClick(index)">
              <text class="font28" :class="[type==index ? 'text1' :'text3']">{{item}}</text>
            </div>
          </div>

          
          <div class="line-chart">
            <div class="row acenter mb20">
              <text class="font28 text1">{{T('每日收益分析')}}</text>
            </div>
            <WeexLineChartx  v-if="dayIncomeList.length" class="line-chart-size" :data="dayIncomeList"></WeexLineChartx>
          </div>

          <div class="line-chart mb40">
            <div class="row acenter mb20">
              <text class="font28 text1">{{T('总收益分析')}}</text>
            </div>
            <WeexLineChartx v-if="totalIncomeList.length" class="line-chart-size" :data="totalIncomeList"></WeexLineChartx>
          </div>
        </cell>

        <cell v-if="menu==1">
          <div class="users bg2 mb40">
            <div class="user-head">
              <text class="font24 text3 all2">{{T('用户名')}}</text>

              <text class="font24 text3 all">{{T('粉丝')}}</text>

              <text class="font24 text3 tRight all">{{T('量化交易时间')}}</text>
            </div>

            <VUserCell v-for="(item, index) in followUsers" 
            :key="menu+''+index"  :item="item" :line="index<followUsers.length-1"
            @cell="userCell"/>
          </div>
        </cell>

        <cell v-if="menu==2">
          <VPoint class="cell-point" v-for="(item, index) in points" 
          :key="menu+''+index" :item="item"
          @info="infoClick" @func="funcClick"
          @zhan="httpUnlikeLike" @share="shareClick" />

          <!-- 无更多数据 -->
          <div class="genduo" v-if="pageMax">
            <text class="font22 text3">{{T('没有更多数据')}}</text>
          </div>
        </cell>
        
        <loading v-if="menu==2 && !pageMax" 
        class="refresh" :display="isLoadinging ? 'show' : 'hide'"
        @loading="httpQueryPointLoading">
          <loading-indicator class="load text1"></loading-indicator>
        </loading>
      </template>
    </list>
  
     <VTips class="tips" v-else
    :text="['未登录', '登录后查看～']" image="list_kong.png"
    :width="283" :height="238">
      <div class="row jcenter">
        <div class="tips-add main1" @click="loginClick">
          <text class="font32 text1">{{T('登录')}}</text>
        </div>
      </div>
    </VTips>

    <!--弹出菜单-->
    <div class="func" v-if="showFunc" @click="(showFunc = false)">

      <div class="func-frame" ref="func" :style="{'top':menuTop}">
        <div class="row jend">
          <LImage class="func-jiao" v-if="menuFace" :src="Config.img('function-sanjiao.png')"></LImage>
        </div>
        <div class="func-content bg4">
          <text class="font28 text2 func-text"  v-for="(item, index) in funcs" v-bind:key="index" @click="funcClickx(item)">{{T(item)}}</text>
        </div>
        <div class="row jend">
          <LImage class="func-jiao" v-if="!menuFace" :src="Config.img('function-sanjiaox.png')"></LImage>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


//功能
import jconfig from "@/_js/config";
import jbroadcast from "@/_js/broadcast";
import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jtime from "@/_js/time"
import jhttps from "@/_js/https";

const weexFunction = weex.requireModule("WeexFunction");
const dom = weex.requireModule("dom");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('我的量化'));

//组件
import VTips from "@/_public/VTips";
import VSubMenu from '@/_public/VSubMenu.vue'
import VUserCell from './view/VUserCell.vue'
import VPoint from './view/VPoint.vue'
export default {

  components: {
    VTips,
    VSubMenu,
    VUserCell,
    VPoint
  },

  data() {
    return {
      T: T,
      Config:jconfig,

      menu: 0,
      menus:[T('实盘统计'), T('关注的人'), T('我的观点')],

      type:0,
      types:[T('合约量化'), T('现货量化')],

      data:undefined, // 数据源
      datas:[],
      followUsers:[], //关注用户
      dayIncomeList:[], //日收益
      totalIncomeList:[], //总收益

      menuTop: 0, //功能菜单上距离
      menuFace: true, //功能菜单方向：true 向上  false向下
      showFunc:false, //true 显示功能菜单
      funcs:[T('删除')], //功能菜单


      pageNo:1, //页码
      isRefresh:false, //显示刷新
      pageMax:false, //turn最大页面
      isLoadinging:false, //显示加载
      points:[],

      itemMap:undefined //当前操作对象
    };
  },


  mounted() {
    jconfig.init(()=>{
      this.refresh();
    },[jconfig.OPT_UP_DOWN]);

    // setTimeout(() => {
    //   var param = {};
    //   jnavigator.load('', 'follw/MFollwManInfox', param);
    // }, 10000);
  },

  methods: {

    viewappear() {
      this.refresh();
    },


    initPoint(datas) {

      for (let index = 0; index < datas.length; index++) {
        var data = datas[index];

        var timestamp = new Date().getTime();
        var cha = timestamp - data.createTime;
        if (cha < 30000) {
          data.avatar == T('刚刚');
        } else if (cha < 60000) {
          data.avatar == T('1分钟前');
        } else {
          data.time = jtime.getTime(data.createTime, 'y/M/d H:m');
        }
        data.avatar = data.avatar ? data.avatar : jconfig.img('touxiang.png');
      }
      return datas;
    },

    refresh() {
      if (!jconfig.isLogin) return;
      
      if (this.isRefresh) return;
      this.isRefresh = true;
      this.httpInitiatorDetail();
    },

    /******************************* https */
    //http跟单人详情
    httpInitiatorDetail() {
      
      var param = {};
      jhttps.post("followNew/personalHomePage",param,true,(data) => {

        this.isRefresh = false;
        if (data.status == 200) {
          
          data = data.data;

          var user = data.user;
          user.avatar = user.avatar ? user.avatar : jconfig.img('view_image_portrait_normal.png');
          user.mark = user.mark ? user.mark : '这个用户很懒，什么都没写…';
          user.timeLent = jtime.getTimeLength(user.registerTime, undefined, 'dd');

          data.warnRate = data.warnRate ? jmath.cheng(data.warnRate, 100, 2, 2) : '0';
          data.maxDrawdown = data.maxDrawdown ? data.maxDrawdown : '0';

          this.data = data;
          this.menuClick(this.menu)
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http粉丝列表
    httpQueryFollowUserList() {
      
      jmodal.showLoad();
      var param = {};
      jhttps.post("followNew/queryFollowUserList",param,true,(data) => {
        jmodal.hideLoad();
        if (data.status == 200) {
          var datas = data.data;
          datas.forEach((item)=>{
            item.avatar = item.avatar ? item.avatar : jconfig.img('view_image_portrait_normal.png');
            item.timeLent = jtime.getTimeLength(item.registerTime, undefined, 'dd');
          })
          this.followUsers = datas;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http总收益曲线
    httpQueryUserIncomeLine(type) {
      
      var param = {type}; //SPOT 现货，contract_usdt
      jhttps.post("followNew/queryUserIncomeLine",param,true,(data) => {
        jmodal.hideLoad();
        if (data.status == 200) {
          var map = data.data;

          var dayIncomeList = map.dayIncomeList;
          if(dayIncomeList.length==0) {
            var t =  new Date().getTime();
            var ont = jmath.jian(t, '86400000')
            dayIncomeList = [{'t':ont, 'e':'0'}, 
                             {'t':t, 'e':'0'}]
          } else if(dayIncomeList.length==1) {
            var t = dayIncomeList[0].createTime;
            t = jmath.jian(t, '86400000')
            dayIncomeList.unshift({'t':t, 'e':'0'});
          }
          this.dayIncomeList = dayIncomeList;


          var totalIncomeList = map.totalIncomeList;          
          if(totalIncomeList.length==0) {
            var t =  new Date().getTime();
            var ont = jmath.jian(t, '86400000')
            totalIncomeList = [{'t':ont, 'e':'0'}, 
                               {'t':t, 'e':'0'}]
          } else if(totalIncomeList.length==1) {
            var t = totalIncomeList[0].createTime;
            t = jmath.jian(t, '86400000')
            totalIncomeList.unshift({'t':t, 'e':'0'});
          }
          this.totalIncomeList = totalIncomeList;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },
    
    //http观点-刷新
    httpQueryPoint() {
      
      jmodal.showLoad();
      var param = {'pageNo':1};
      jhttps.post("point/queryMyPoint",param,true,(data) => {
        jmodal.hideLoad();
        if (data.status == 200) {

          data = data.data;
          this.expense  = data.expense;
          this.points = this.initPoint(data.list);
          this.pageNo = 1;
          this.pageMax = this.points.length < 20;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http观点-加载
    httpQueryPointLoading() {
      if(this.menu!=2) return;

      var param = {'pageNo': this.pageNo+1};
      if (this.pageMax || this.isRefresh || this.isLoadinging) return;
      this.isLoadinging = true;

      var param = {'pageNo': this.pageNo+1};
      jhttps.post("point/queryMyPoint",param,true,(data) => {
        this.isLoadinging = false;
        if (data.status == 200) {

          data = data.data;
          var datas = this.initPoint(data.list);
          this.points.push(...datas);
          this.pageNo++;
          this.pageMax = datas.length < 20;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http点赞
    httpUnlikeLike(item) {
      if(!jconfig.forceLogin()) return;

      jmodal.showLoad();
      var param = {'id':Number(item.id)};
      var url = item.isLike == 1 ? 'point/unlike' : 'point/giveALike';
      jhttps.post(url, param,true,(data) => {

        jmodal.hideLoad();
        if (data.status == 200) {
          item.isLike = item.isLike == 1 ? 0 : 1;
          var likeNum = item.isLike == 1 ? jmath.jia(item.likeNum, 1) : jmath.jian(item.likeNum, 1);
          item.likeNum = likeNum < 0 ? 0 : likeNum;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http删除观点
    httpDelPoint(item) {
      
      jmodal.showLoad();
      var param = {'id':Number(item.id)};
      jhttps.post('point/delPoint', param,true,(data) => {

        jmodal.hideLoad();
        if (data.status == 200) {

          for (let index = 0; index < this.points.length; index++) {
            var map = this.points[index];
            if (map.id == item.id) {
              this.points.splice(index, 1);
              return;
            }
          }
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    /********************************** 点击方法*/
    //菜单点击
    menuClick(index){
      this.menu = index;

      if (index == 0) {
        this.datas = this.data.executeList;
        this.typeClick(this.type) 
      } else if (index == 1) {
        this.datas = this.data.executeHistoryList;
        this.httpQueryFollowUserList();
      } else {
        this.$forceUpdate()
        this.httpQueryPoint();
      }
    },
    
    //类型点击
    typeClick(index) {
      jmodal.showLoad();
      this.type = index;
      this.totalIncomeList = [];
      this.dayIncomeList = [];
      var type = index==0 ? 'contract_usdt' : 'SPOT';
      this.httpQueryUserIncomeLine(type);
    },

    //登录
    loginClick() {
      jconfig.forceLogin();
    },

    //详情
    infoClick(item){
      var param = {'id':item.id, 'isUser':true};
      jnavigator.open('', 'point/PointInfo', param);
    },

    //功能
    funcClick(item, event){
      
      this.itemMap = item;
      dom.getComponentRect(this.$refs.content, (contentFrame)=>{
        var contentHeight = contentFrame.size.height;
        var funcsHeight = 80 * this.funcs.length + 29;
        var y = event.position.y - 80 + funcsHeight;
        if (y > contentHeight) {
          this.menuFace = false;
          this.menuTop = event.position.y - funcsHeight - 220 + "px";
        } else {
          this.menuFace = true;
          this.menuTop = event.position.y - 120 + "px";
        }
        this.showFunc = true;
      });
    },

    funcClickx(item) {

      this.showFunc = false;
      if (item == T('删除')) {

        var parm = {'title':T("删除确认"),
                    'message':T("删除观点后无法找回，是否确认删除？")};
        jmodal.confirm(parm, (bool)=>{
          if (bool == "true") {
            this.httpDelPoint(this.itemMap);
          }
        });
      }
    },

    //分享
    shareClick() {
      weexFunction.shareApp();
    }
  },
};
</script>

<style src="@/_css/style.css"></style>
<style scoped>
.bg {
  width: 750px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.genduo {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 750px;
  height: 100px;
}

/***********************************列表*/
.list {
  width: 750px;
  margin-top: 2px;
}

/*********************************** 头部*/
.head {
  flex-direction: column;
  width: 750px;
  padding: 40px;
}
.img-avatar {
  width: 96px;
  height: 96px;
  border-radius: 48px;

  margin-right: 30px;
}
.but-follow {
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 6px;
  padding: 0 20px;
  margin-left: 30px;
}

/*********************************** 信息*/
.info {
  flex-direction: row;
  width: 710px;
  border-radius: 20px;
  padding: 40px;
  margin-left: 20px;
  margin-top: 20px;
}
.info-line {
  width: 1px;
  margin: 0 30px;
}

/*********************************** 菜单*/
.menu {
  width: 750px;
  height: 88px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/*********************************** 走势图*/
.type {
  flex-direction: row;
  width: 440px;
  height: 64px;
  border-radius: 8px;
  margin-left: 40px;
}
.type-size {
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 64px;
  border-radius: 8px;
}
.line-chart {
  margin-top: 40px;
  height: 450px;
  margin: 40px 40px 0 40px;
}
.line-chart-color{
  width: 20px;
  height: 12px;
  border-radius: 2px;
  
  margin-right: 20px;
}
.line-chart-size {
  flex: 1;
}
/*********************************** 列表*/
.user-head{
  flex-direction: row;
  align-items: center;
  height: 112px;
  padding: 0 40px;
}
.users {
  margin-left: 20px;
  width: 710px;
  border-radius: 20px;
}
.cell {
  width: 710px;
  height: 200px;
  margin-left: 20px;
  margin-bottom: 20px;
}

/*********************** 刷新*/
.refresh {
  width: 750;
  flex-direction: row;
  justify-content: center;
}
.load {
  margin-top: 16px;
  height: 40px;
  width: 40px;
}
.tips {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tips-add{
  align-items: center;
  justify-content: center;
  width: 380px;
  height: 80px;
  background-color: #1677FE;
  border-radius: 40px;
  margin-top: 40px;
}


/*********************************** 功能弹窗*/
.func{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.func-frame {
  position: absolute;
  right: 22;
}
.func-jiao {
  width: 28px;
  height: 20px;
  margin-right: 20px;
}
.func-content {
  border-radius: 16px;
  
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;
}
.func-text {
  min-width: 204px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.height60 {
  height: 120px;
}
</style>
